<template>
	<view class="content">
		<u-sticky>
			<view class="tabsBox">
				<u-tabs :list="list1"  itemStyle="padding: 7px 14px;" lineHeight="1" lineColor="#020202"  @click="changeTab" :activeStyle="activeStyle"   :inactiveStyle="inactiveStyle"></u-tabs>
			</view>
		</u-sticky>
		<view class="box" v-if="orderList && orderList.length > 0"> 
			<view class="item" v-for="item in orderList" :key="item.id" @click="handleToDetail(item.id)">
				<view class="top">
					<text class="left">订单编号：{{item.orderSn}}</text>
					<text class="right">{{getStatusText(item.status)}}</text> 
				</view>
				<view class="goodsInfo">
					<view class="sitem" v-for="sitem in item.orderItemList" :key="sitem.id">
						<image :src="sitem.productPic" mode=""></image>
						<view class="right">
							<view class="name clamp2">
								{{sitem.productName}}
							</view>
							<view class="cate">
								{{getProductAttr(sitem.productAttr)}}
							</view>
							<view class="sbot">
								<view class="price">
									￥{{sitem.productPrice}}
								</view> 
								<view class="num">
									（共{{sitem.productQuantity}}件）
								</view>
							</view> 
						</view>
					</view> 
				</view>
				<view class="bot">
					<view class="price">
						应付款：<text>￥{{item.payAmount}}</text>
					</view>
					<view class="btn" v-if="item.status == 0 || item.status == 2 || item.status == 3 && !item.commentTime"> 
						
						
						<view class="btn1" v-if="item.status == 0" @click.stop="handleCancelOrder(item.id)">取消订单</view>
						<view class="btn2" v-if="item.status == 0" @click.stop="handleAgainPay(item)">去付款</view> 
						
						<!-- <view class="btn2" v-if="item.status == 1 && item.refund == 'true'" @click.stop="handleToAfterSale(item.id,item.list,'1')">申请退款</view> -->
						<!-- <view class="btn1" v-if="item.status == 2" @click="handleViewExpress">查看物流</view> -->
						<view class="btn2" v-if="item.status == 2" @click.stop="handleConfirmReceipt(item.id)">确认收货</view>
						<view class="btn2" v-if="item.status == 3 && !item.commentTime"  @click.stop="handleToSubmitReviews(item.id,item.orderItemList)">立即评价</view>
					 </view>
				</view>
			</view>   
			<u-loadmore class="loadmore" :status="status" v-if="page > 1" />
		</view>
		<view class="null" v-else>
			<u-empty text="暂无内容" icon="/static/e.png" marginTop="100" ></u-empty>
		</view> 
		 <loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:'-1',
				status: 'loadmore', 
				allData: false,
				pagesize: 10,
				page: 1,
				orderList:[],
				list1: [{
					name: '全部',
					value:'-1'
				}, {
					name: '待付款',
					value:'0'
				}, {
					name: '待发货',
					value:'1'
				}, {
					name: '已发货',
					value:'2'
				}, {
					name: '已完成',
					value:'3'
				}],
				activeStyle:{
					color: '#000', 
					fontWeight:"bold"
				},
				inactiveStyle:{
					color: '#666', 
				},
			}
		},
		onLoad(options) {
		    this.getList()
		},
		onReachBottom() {
			if (this.allData) {
				this.status = 'loading'
				this.page++
				this.getList();
			}
		},
		methods: {
			getProductAttr(arr){
				return JSON.parse(arr).map(item=>item.value).join('_')
			},
			getStatusText(status){
				return status == 0 ? '待付款' : status == 1 ? '待发货' : status == 2 ? '已发货' :  status == 3 ? '已完成' : status == 4 ? '已关闭' : status == 5 ? '无效订单' : ''
			},
			handleAgainPay(item){
				this.$http({
					url:'/order/againPay',
					method:'post',
					data: {
						orderId:item.id,
					}
				}).then(res=>{ 
					 uni.requestPayment({
						timeStamp: res.payInfo.timeStamp,
						nonceStr: res.payInfo.nonceStr,
						package: res.payInfo.package,
						signType: res.payInfo.signType,
						paySign: res.payInfo.paySign,
						success: (res) => {
							uni.showToast({
								title: '支付成功'
							}) 
							const index = this.orderList.findIndex(item=>item.id == id)
							this.orderList[index].status = 1
						},
						fail:(res) => { 
							if(res.errMsg == 'requestPayment:fail cancel'){
								uni.showToast({
									title:'取消支付',
									icon:'none'
								}) 
							 } 
						  }
					 }) 
				})
			},
			handleConfirmReceipt(id){
				uni.showModal({
					content: '确定收货吗',
					success: (res) =>{
						if (res.confirm) {
							this.$http({
								url:"/order/confirmReceiveOrder",
								method:'post',
								data:id
							}).then(data=>{
								uni.showToast({
									title:"操作成功",
									icon:"none"
								}) 
								const index = this.orderList.findIndex(item=>item.id == id)
								this.orderList[index].status = 3
							})
						} 
					}
				}); 
			},  
 
			handleCancelOrder(id){
				uni.showModal({
					content: '确定要取消订单吗',
					success: (res) =>{
						if (res.confirm) {
							this.$http({
								url:"/order/cancelUserOrder",
								method:"post",
								data:id
							}).then(()=>{
								uni.showToast({
									title:"取消成功",
									icon:"none"
								})
								const index = this.orderList.findIndex(item=>item.id == id)
								this.orderList[index].status = 4
							})
						} 
					}
				});   
			},
			getList(){
				this.$http({
					url:'/order/list',
					method:'get',
					data:{
						status:this.type,
						pageNum:this.page,
						pageSize:10
					}
				}).then(data=>{
					if (this.page == 1) { 
						this.orderList = data.list ? data.list : []
					} else {
						if(data.list){
							this.orderList.push(...data.list)
						} 
					}  
					if (data.totalPage > data.pageNum) {
						this.allData = true
						this.status = 'loading'
					} else {
						this.status = 'nomore' 
					    this.allData = false
					} 
				})
			}, 
			handleToDetail(id){
				uni.navigateTo({
					url:`./detail?id=${id}`
				})
			},
			changeTab(e){
				this.type = e.value 
				this.page = 1
				this.getList() 
			},  
			handleToSubmitReviews(id,info){
				uni.navigateTo({
					url:`/pages/order/submitReviews?info=${JSON.stringify(info)}&id=${id}&source=list`
				})
			}
		}
	}
</script>

<style>
	page{
		background:#F8F8F8;
	}
</style>

<style lang="scss" scoped>
	.box{
		padding: 30rpx;
		box-sizing: border-box;
		.item{
			background: #fff; 
			margin-bottom: 30rpx;
			padding: 0 24rpx;
			.bot{
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				padding: 24rpx;
				padding-top: 0%;
				.text{
					font-size: 28rpx;
					color: #333;
				}
				.price{
					font-size: 24rpx;
					color: #333;
					text{
						font-size: 28rpx;
					}
				}
				.btn{
					margin-top: 32rpx;
					margin-left: auto;
					display: flex;
					align-items: center;
					.btn1{
						width: 160rpx;
						height: 60rpx;
						background: #FFFFFF;
						border-radius: 50rpx;
						border: 1rpx solid #020202;
						text-align: center;
						line-height: 60rpx;
						font-size: 24rpx;
						color: #020202;
					}
					.btn2{
						width: 160rpx;
						height: 60rpx;
						background: #020202;
						text-align: center;
						color: #fff;
						line-height: 60rpx;
						font-size: 24rpx;
						border: 1px solid #020202;
						border-radius: 50rpx;
						margin-left: 20rpx;
					}
				}
			}
			.goodsInfo{
				padding: 30rpx 0;
				box-sizing: border-box;
				padding-bottom: 0;
				.sitem{
					display: flex; 
					padding-bottom: 30rpx;
					margin-bottom: 30rpx;
					border-bottom: 1px solid #f2f2f2;
					image{
						width: 180rpx;
						height: 180rpx;
						border-radius: 20rpx;
					}
					.right{
						display: flex;
						flex-direction: column;
						flex: 1;
						margin-left: 30rpx;
						.name{
							font-size: 30rpx;
							color: #333;
							font-weight: bold;
						}
						.cate{
							font-size: 24rpx;
							color: #999999;
							margin-top: 10rpx;
						}
						.sbot{
							margin-top: auto;
							display: flex;
							align-items: center;
							.price{
								font-size: 30rpx;
								color: #333333; 
							} 
							.num{
								font-size: 24rpx;
								color: #999999;
							}
						}
					}
				}
			}
			.top{
				display: flex;
				align-items: center;
				height: 90rpx;
				justify-content: space-between;
				box-sizing: border-box;
				border-bottom: 1px solid #f2f2f2;
				.left{
					font-size: 24rpx;
					color: #333333;
				}
				.right{
					font-size: 24rpx;
					color: #020202;
				}
			}
		}
	}
	.tabsBox{
		display: flex;
		justify-content: center;
		background: #fff;
		padding: 20rpx 0;
	}
</style>
